/* 布局相关样式 */
.w1200 {
    width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 主容器 */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 主要内容区域 */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.mt30 {
    margin-top: 30px;
}

.mt20 {
    margin-top: 20px;
}

/* Flex网格系统 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col {
    flex: 1;
    padding: 0 15px;
}

.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}